<%@ page language="java" contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
<title>订单列表</title>
<link rel="stylesheet" href="css/bootstrap.css"/> 
<style>
    /* 页面容器 */
    .page-container {
        padding: 20px;
        background: #f6f9fc;
        min-height: 100vh;
    }

    /* 标签导航 */
    .tab-nav {
        display: flex;
        gap: 10px;
        margin-bottom: 24px;
        border-bottom: 2px solid #e8f5e9;
        padding-bottom: 2px;
    }

    .tab-nav a {
        padding: 12px 24px;
        color: #4a5568;
        text-decoration: none;
        border-radius: 8px 8px 0 0;
        font-weight: 500;
        transition: all 0.3s ease;
    }

    .tab-nav li {
        list-style: none;
    }

    .tab-nav li.active a {
        color: #4CAF50;
        background: #e8f5e9;
    }

    .tab-nav a:hover {
        color: #4CAF50;
        background: #f0fdf4;
    }

    /* 表格样式 */
    .order-table {
        width: 100%;
        background: white;
        border-radius: 12px;
        box-shadow: 0 2px 15px rgba(0,0,0,0.08);
        overflow: hidden;
        border-collapse: collapse;
    }

    .order-table th {
        background: #f7fafc;
        padding: 16px;
        text-align: left;
        color: #4a5568;
        font-weight: 600;
        font-size: 14px;
        border-bottom: 2px solid #e2e8f0;
    }

    .order-table td {
        padding: 16px;
        border-bottom: 1px solid #e2e8f0;
        color: #2d3748;
        font-size: 14px;
        vertical-align: top;
    }

    .order-table tr:last-child td {
        border-bottom: none;
    }

    /* 订单信息样式 */
    .order-info {
        margin: 0;
        line-height: 1.6;
    }

    .order-info p {
        margin: 0 0 8px 0;
    }

    .order-info p:last-child {
        margin-bottom: 0;
    }

    /* 状态标签样式 */
    .status-tag {
        display: inline-block;
        padding: 4px 12px;
        border-radius: 6px;
        font-size: 13px;
        font-weight: 500;
    }

    .status-unpaid {
        background: #fff5f5;
        color: #e53e3e;
    }

    .status-paid {
        background: #f0fff4;
        color: #2f855a;
    }

    .status-shipping {
        background: #ebf8ff;
        color: #2c5282;
    }

    .status-completed {
        background: #f7fafc;
        color: #4a5568;
    }

    /* 按钮样式 */
    .btn {
        display: inline-block;
        padding: 8px 16px;
        border-radius: 6px;
        font-size: 14px;
        font-weight: 500;
        text-decoration: none;
        cursor: pointer;
        transition: all 0.3s ease;
        border: none;
        margin: 0 4px;
    }

    .btn-success {
        background: #4CAF50;
        color: white;
    }

    .btn-success:hover {
        background: #45a049;
        transform: translateY(-1px);
    }

    .btn-warning {
        background: #f6ad55;
        color: white;
    }

    .btn-warning:hover {
        background: #ed8936;
        transform: translateY(-1px);
    }

    .btn-danger {
        background: #f56565;
        color: white;
    }

    .btn-danger:hover {
        background: #e53e3e;
        transform: translateY(-1px);
    }

    /* 支付方式标签 */
    .payment-type {
        display: inline-block;
        padding: 4px 12px;
        border-radius: 6px;
        background: #f7fafc;
        color: #4a5568;
        font-size: 13px;
    }

    /* 分页工具样式 */
    .page-tools {
        margin-top: 24px;
        text-align: center;
    }

    .page-tools a {
        display: inline-block;
        padding: 8px 16px;
        margin: 0 4px;
        border-radius: 6px;
        background: white;
        color: #4a5568;
        text-decoration: none;
        transition: all 0.3s ease;
    }

    .page-tools a:hover {
        background: #e8f5e9;
        color: #4CAF50;
    }

    .page-tools .active {
        background: #4CAF50;
        color: white;
    }

    /* 响应式调整 */
    @media (max-width: 1024px) {
        .order-table {
            display: block;
            overflow-x: auto;
        }

        .tab-nav {
            overflow-x: auto;
            padding-bottom: 5px;
        }

        .tab-nav::-webkit-scrollbar {
            height: 4px;
        }

        .tab-nav::-webkit-scrollbar-thumb {
            background: #cbd5e0;
            border-radius: 2px;
        }
    }

    @media (max-width: 768px) {
        .page-container {
            padding: 15px;
        }

        .order-table th,
        .order-table td {
            padding: 12px;
            font-size: 13px;
        }

        .btn {
            padding: 6px 12px;
            font-size: 13px;
        }
    }
</style>
</head>
<body>
<div class="page-container">

	<%@include file="header.jsp" %>
	
	<br>
	
	<ul class="tab-nav">
        <li <c:if test='${status==0}'>class="active"</c:if>><a href="orderList">全部订单</a></li>
        <li <c:if test='${status==1}'>class="active"</c:if>><a href="orderList?status=1">未付款</a></li>
        <li <c:if test='${status==2}'>class="active"</c:if>><a href="orderList?status=2">已付款</a></li>
        <li <c:if test='${status==3}'>class="active"</c:if>><a href="orderList?status=3">配送中</a></li>
        <li <c:if test='${status==4}'>class="active"</c:if>><a href="orderList?status=4">已完成</a></li>
    </ul>
    
    <br>
	
	<table class="order-table">

	<tr>
		<th width="5%">ID</th>
		<th width="5%">总价</th>
		<th width="15%">商品详情</th>
		<th width="20%">收货信息</th>
		<th width="10%">订单状态</th>
		<th width="10%">支付方式</th>
		<th width="10%">下单用户</th>
		<th width="10%">下单时间</th>
		<th width="10%">操作</th>
	</tr>
	
	<c:forEach var="order" items="${orderList}">
         <tr>
         	<td>
         		<div class="order-info">
         			<p>#${order.id}</p>
         		</div>
         	</td>
         	<td>
         		<div class="order-info">
         			<p>¥${order.total}</p>
         		</div>
         	</td>
         	<td>
	         	<div class="order-info">
	         		<c:forEach var="item" items="${order.itemList}">
		         		<p>${item.good.name}(¥${item.price}) x ${item.amount}</p>
	         		</c:forEach>
	         	</div>
         	</td>
         	<td>
         		<div class="order-info">
         			<p>${order.name}</p>
         			<p>${order.phone}</p>
         			<p>${order.address}</p>
         		</div>
         	</td>
			<td>
				<c:choose>
					<c:when test="${order.status==1}">
						<span class="status-tag status-unpaid">未付款</span>
					</c:when>
					<c:when test="${order.status==2}">
						<span class="status-tag status-paid">已付款</span>
					</c:when>
					<c:when test="${order.status==3}">
						<span class="status-tag status-shipping">配送中</span>
					</c:when>
					<c:when test="${order.status==4}">
						<span class="status-tag status-completed">已完成</span>
					</c:when>
				</c:choose>
			</td>
			<td>
				<span class="payment-type">
					<c:choose>
						<c:when test="${order.paytype==1}">微信</c:when>
						<c:when test="${order.paytype==2}">支付宝</c:when>
						<c:when test="${order.paytype==3}">货到付款</c:when>
					</c:choose>
				</span>
			</td>
			<td>
				<div class="order-info">
					<p>${order.user.username}</p>
				</div>
			</td>
			<td>
				<div class="order-info">
					<p><fmt:formatDate value="${order.systime}" pattern="yyyy-MM-dd HH:mm:ss" /></p>
				</div>
			</td>
			<td>
				<c:if test="${order.status==2}">
					<a class="btn btn-success" href="orderDispose?id=${order.id}&status=${status}">发货</a>
				</c:if>
				<c:if test="${order.status==3}">
					<a class="btn btn-warning" href="orderFinish?id=${order.id}&status=${status}">完成</a>
				</c:if>
				<a class="btn btn-danger" href="orderDelete?id=${order.id}&status=${status}">删除</a>
			</td>
       	</tr>
	</c:forEach>
     
</table>

<div class="page-tools">
	${pageTool}
</div>
</div>
</body>
</html>